<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>聊天室</title>
</head>
<style type="text/css">
    .msg_board {
        width: 322px;
        height: 100px;
        border: solid 1px darkcyan;
        padding: 5px;
        overflow-y: scroll;
    / / 文字长度大于div宽度时换行显示 word-break: break-all;
    }

    /*set srcoll start*/
    ::-webkit-scrollbar {
        width: 10px;
        height: 10px;
        background-color: #D6F2FD;
    }

    ::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
        /*border-radius: 5px;*/
        background-color: #D6F2FD;
    }

    ::-webkit-scrollbar-thumb {
        height: 20px;
        /*border-radius: 10px;*/
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
        background-color: #89D7F7;
    }

    /*set srcoll end*/
</style>
<body onload="load()">

<div class="select">
    <span>请选择姓名：</span>
    <select id="test_select" onchange="gradeChange()">
        <option value="1">app</option>
        <option value="2">web</option>
        <option value="2">孙</option>
    </select>
</div>
<div>
    <span>请选择谁能看到：</span>
    <div id="zhao">
        <label for="c1">app</label>
        <input type="checkbox" class="checkbox" id="c1">
    </div>
    <div id="qian">
        <label for="c1">web</label>
        <input type="checkbox" class="checkbox" id="c2">
    </div>

    <div id="sun">
        <label for="c1">孙</label>
        <input type="checkbox" class="checkbox" id="c3">
    </div>
    <a id="checkAll" href="javascript:void(0)">全选</a>
    <a id="checkReverse" href="javascript:void(0)">反选</a>
    <a id="checkClear" href="javascript:void(0)">清空</a>
</div>


<input type="button" value="进入聊天室" onclick="initWebSocket()"/>
<input type="button" value="退出聊天室" onclick="closeWs()"/><br>
<div class="msg_board"></div>
<input id="input_msg" size="43" maxlength="40">
<input type="button" value="发送" onclick="send_msg()"/>

</body>

<script type="text/javascript">
    var webSocket;

    function send_msg() {
        if (webSocket != null) {
            var userIdList = new Array();

            if (document.getElementById("c1").checked) {
                userIdList.push("赵");
            }
            if (document.getElementById("c2").checked) {
                userIdList.push("钱");
            }
            if (document.getElementById("c3").checked) {
                userIdList.push("孙");
            }
            var input_msg = document.getElementById("input_msg").value.trim();
            if (input_msg == "") {
                return;
            }
            var msg = {
                message: input_msg,
                userIdList: userIdList
            };

            webSocket.send(JSON.stringify(msg));
            // 清除input框里的信息
            document.getElementById("input_msg").value = "";
        } else {
            alert("您已掉线，请重新进入聊天室...");
        }
    };

    function closeWs() {
        webSocket.close();
    };

    function initWebSocket() {
        var select = document.getElementById("test_select");
        var userId = select.options[select.selectedIndex].text;

        // var userId = document.getElementById("input_roomName").value;
        // 房间名不能为空
        if (userId == null || userId == "") {
            alert("请选择");
            return;
        }
        if ("WebSocket" in window) {
//            alert("您的浏览器支持 WebSocket!");
            if (webSocket == null) {
                // var url = "ws://localhost:8080/webSocket/chat/" + userId;
                var url = "ws://localhost:8182/command-web/webSocket/custom/" + userId;
                // 打开一个 web socket
                webSocket = new WebSocket(url);
            } else {
                alert("您已进入聊天室...");
            }

            webSocket.onopen = function () {
                alert("已进入聊天室，畅聊吧...");
            };

            webSocket.onmessage = function (evt) {
                var msg_board = document.getElementsByClassName("msg_board")[0];
                var received_msg = evt.data;
                var old_msg = msg_board.innerHTML;
                msg_board.innerHTML = old_msg + received_msg + "<br>";
                // 让滚动块往下移动
                msg_board.scrollTop = msg_board.scrollTop + 40;
            };

            webSocket.onclose = function (evt) {
                // 关闭 websocket，清空信息板
                alert("连接已关闭...");
                setTimeout(function () {
                    // alert(evt.data);
                    document.getElementsByClassName("msg_board")[0].innerHTML = "";
                }, 2000);
                webSocket = null;


            };
        } else {
            // 浏览器不支持 WebSocket
            alert("您的浏览器不支持 WebSocket!");
        }
    }

    //获取所有class为checkbox的多选按钮(需要以下功能需要先写出对应功能的元素)。
    var checkBoxList = document.getElementsByClassName("checkbox"),
        checkAll = document.getElementById("checkAll"),//全选
        checkReverse = document.getElementById("checkReverse"),//反选
        checkClear = document.getElementById("checkClear");//清空
    //全选
    checkAll.onclick = function () {
        for (var i = 0; i < checkBoxList.length; i++) {
            checkBoxList[i].checked = true;
        }
    }
    //反选
    checkReverse.onclick = function () {
        for (var i = 0; i < checkBoxList.length; i++) {
            if (checkBoxList[i].checked == true) {
                checkBoxList[i].checked = false;
            } else {
                checkBoxList[i].checked = true;
            }
        }
    }
    //清空
    checkClear.onclick = function () {
        for (var i = 0; i < checkBoxList.length; i++) {
            checkBoxList[i].checked = false;
        }
    }

    function gradeChange() {
        var objS = document.getElementById("test_select");
        var text = objS.options[objS.selectedIndex].text;
        // if (text=="赵"){
        //     document.getElementById( "zhao").style.visibility= "hidden ";
        //     document.getElementById( "qian").style.visibility= "visible ";
        //     document.getElementById( "sun").style.visibility= "visible ";
        // }
        // if (text=="钱"){
        //     document.getElementById( "zhao").style.visibility= "visible ";
        //     document.getElementById( "qian").style.visibility= "hidden ";
        //     document.getElementById( "sun").style.visibility= "visible ";
        // }
        // if (text=="孙"){
        //     document.getElementById( "zhao").style.visibility= "visible ";
        //     document.getElementById( "qian").style.visibility= "visible ";
        //     document.getElementById( "sun").style.visibility= "hidden ";
        // }
        document.title = text;
    }

    function load() {
        var x = document.getElementById("test_select");
        x.selectedIndex = -1;
    }

    function titleChange() {

    }

    document.onkeyup = function (e) {
        // 兼容FF和IE和Opera
        var event = e || window.event;
        var key = event.which || event.keyCode || event.charCode;
        if (key == 13) {
            /*Do something. 调用一些方法*/
            send_msg()
        }
    };
</script>
</html>